<script lang="ts">

import { defineComponent, } from 'vue';
import { followDesignerStore } from '@/stores/userInfo'
import { showToast } from 'vant';
export default defineComponent({
    setup() {
        let followList: any = followDesignerStore().$state.followDesignerStore
        let cancelFollow = (designerName: any) => {
            let index = followList.findIndex((item: any) => {
                return designerName == item.designerName
            })
            followDesignerStore().$state.followDesignerStore.splice(index, 1)
            showToast('已取消关注')
        }
        return {
            followList, cancelFollow
        }
    }
})
</script>

<template>
    <div class="myfollow">
        <div class="myfollow-Header">
            <van-nav-bar title="我的关注" left-arrow @click-left="$router.back()" />
        </div>
        <div class="myfollow-Body">
            <div class="myfollow-item" v-for="item in followList">
                <div class="myfollow-itemImgBox">
                    <img :src="item.pic">
                </div>
                <div class="myfollow-itemcom">
                    <h3>{{ item.designerName }}</h3>
                    <span>{{ item.belongTo }}</span>
                </div>
                <van-button type="default" class="Btn-Followed" @click="cancelFollow(item.designerName)">已关注</van-button>

            </div>
        </div>
        <van-empty image="error" description="你的关注列表为空，快去关注吧~" v-if="followList.length == 0" />
    </div>
</template>

<style lang="scss" scoped>
.myfollow {
    min-height: 100vh;

    .myfollow-Header {
        :deep(.van-nav-bar) {
            .van-nav-bar__content {
                height: 35px;

                .van-nav-bar__left {
                    i {
                        font-size: 18px;
                        color: #000;
                    }
                }

                .van-nav-bar__title {
                    font-weight: normal;
                }
            }

        }
    }

    .myfollow-Body {
        margin: 0 12px;

        .myfollow-item {
            display: flex;
            height: 50px;
            align-items: center;
            border-bottom: 1px solid #f5f5f5;

            .myfollow-itemImgBox {
                width: 36px;
                height: 36px;
                overflow: hidden;
                border-radius: 50%;
                margin-right: 12px;

                img {
                    object-fit: cover;
                }
            }

            .myfollow-itemcom {
                flex: 1;

                h3 {
                    font-size: 14px;
                    font-weight: bold;
                }

                span {
                    font-size: 12px;
                    transform: scale(0.9);
                    display: block;
                    transform-origin: left;
                    color: #999;
                }
            }

            .van-button {
                height: 28px;
                border-radius: 14px;
                color: #999;
                font-size: 12px;
                margin-right: 8px;
                padding: 4px 10px;
            }

            .Btn-Follow {
                color: #fff;
                background: #3dc3af;
                border-color: #3dc3af;
            }
        }
    }
}
</style>